<template>
  <ModalLayout>
    <div>
      <ModalHeader title="确认删除"></ModalHeader>
      <div class="vuefinder__delete-modal__content">
        <div class="vuefinder__delete-modal__form mt-12 mb-5">
          <p class="vuefinder__delete-modal__description">删除后可以在回收站找回</p>
          <message v-if="message.length" @hidden="message=''" error>{{ message }}</message>
        </div>
      </div>
    </div>

    <template v-slot:buttons>
      <button type="button" @click="remove" class="vf-btn vf-btn-danger">删除</button>
      <button type="button" @click="app.modal.close()" class="vf-btn vf-btn-secondary">{{ t('Cancel') }}</button>
    </template>
  </ModalLayout>
</template>

<script setup>
import ModalLayout from './ModalLayout.vue';
import {inject, ref} from 'vue';
import { message } from 'ant-design-vue';
import ModalHeader from "./ModalHeader.vue";
import DeleteSVG from "../icons/delete.svg";

const app = inject('ServiceContainer');
const {t} = app.i18n;

const items = ref(app.modal.data.items);

const remove = () => {
  if (items.value.length) {
    app.emitter.emit('vf-fetch', {
      params: {
        fetchType: 'delete',
        m: 'post'
      },
      body: {
        ids: items.value.map(n => n.id),
        enterprise_id: app.requestParams.enterprise_id
      },
      onSuccess: () => {
        app.emitter.emit('vf-fetch', {params: {dir: app.fs.data.dirname, dir_id: app.fs.data.dir_id}});
        message.success('删除成功！')
      },
      onError: (e) => {
        message.error(t(e.message));
      }
    });
  }
};

</script>
